<template>
  <header class="header">
    <div class="header-container">
      <nav class="navbar">
        <NuxtLink to="/top" class="navbar-item">
          <img class="logo" src="~/static/logo-48.png" alt="logo" />
        </NuxtLink>
        <NuxtLink to="/top" class="navbar-item" exact-active-class="is-active">Top</NuxtLink>
        <NuxtLink to="/news" class="navbar-item" active-class="is-active">New</NuxtLink>
        <NuxtLink to="/show" class="navbar-item" active-class="is-active">Show</NuxtLink>
        <NuxtLink to="/jobs" class="navbar-item" active-class="is-active"
          >Jobs</NuxtLink
        >
      </nav>
      <a
        class="gitee"
        href="https://gitee.com/yaojinye/nuxt-ssr-demo"
        target="_blank"
        rel="noopener"
      >
        Built with Vue.js
      </a>
    </div>
  </header>
</template>

<script>
export default {
  name: "NavBar",
};
</script>

<style>
.header {
  background-color: #ff6600;
}
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
}
.navbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  box-sizing: border-box;
  height: 60px;
  /* padding: 15px 5px; */
}

.logo {
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
  width: 24px;
}

.gitee {
  color: #fff;
  /* float: right; */
}

.navbar-item {
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #fff;
}

.navbar-item.is-active {
  color: #fff;
  font-weight: bold;
}
</style>
